/* components/loading/loading.wxss */
.coupon-body{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000, $alpha: .5);
  z-index: 10;
  display: flex;
  align-content: center;
  align-items: center;
}
.coupon{
  width: 470rpx;
  height: auto;
  margin: 0 auto;
  border-radius: 8rpx;
  animation-name: topToBottom;
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(1,0,.91,.19);
  >.title{
    >.image{
      display: block;
    }
  }
  >.coupon-list{
    max-height: 310rpx;
    overflow-y: auto;
    margin-bottom: 20rpx;
    position: relative;
    z-index: 1;
    background-image: url();
    background-size: 100%;
    padding-top: 34rpx;
    >.item{
      display: flex;
      background-image: url();
      background-size: 100%;
      width: 390rpx;
      height: 126rpx;
      margin: 0 auto 10rpx;
      align-items: center;
      >.left{
        text-align: center;
        color: #FB5853;
        font-weight: bold;
        width: 123rpx;
        >.symbol{
          font-size: 28rpx;
        }
        >.price{
          font-size: 48rpx;
        }
      }
      >.right{
        flex: 1;
        margin-left: 20rpx;
        >.title{
          font-size: 28rpx;
          font-weight: bold;
          color: #0D0C13;
          margin-bottom: 10rpx;
        }
        >.date{
          font-size: 18rpx;
          color: #616161;
        }
      }
    }
  }
  >.bottom{
    height: 36rpx;
    position: relative;
    >.bg{
      position: relative;
      top: -53rpx;
    }
    >.money{
      animation-name: largeToSmall;
      animation-duration: .5s;
      animation-timing-function: cubic-bezier(1,0,.91,.19);
      position: absolute;
      right: -25rpx;
      top: -40rpx;
      z-index: 2;
    }
  }
  >.close-btn{
    width: 64rpx;
    position: relative;
    top: 110rpx;
    margin: 0 auto;
    >.image{
      display: block;
    }
  }
}

.link-hover{
  opacity: 0.6;
}

@keyframes topToBottom{
  0% { margin-bottom: 1600rpx; }
  85% { margin-bottom: -100rpx; }
  95% { margin-bottom: 50rpx; }
  100% { margin-bottom: 0rpx; }
}
@keyframes largeToSmall{
  0% { transform: scale(5); }
  100% { transform: scale(1); }
}